const path = require("path")
const webpack = require("webpack")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const CleanWebpackPlugin = require("clean-webpack-plugin")
const ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = (env) => {
    if (!env) {
        env = {}
    }
    const plugins = [
        new CleanWebpackPlugin(["dist"]),
        new HtmlWebpackPlugin({ template: "./app/views/index.html" }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
    ]
    // 生产环境时添加使用新的插件
    if (env.production) {
        plugins.push(
            new webpack.DefinePlugin({
                "process.env": {
                    NODE_ENV: "\"production\"",
                },
            }),
            // 单独一个css
            new ExtractTextPlugin("style.css", { ignoreOrder: true })
        )
    }
    return {
        entry: ['./app/js/viewport.js','./app/js/main.js'],
        devServer: {
            contentBase: "./dist",
            hot: true,
            compress: true,
            port: 9000,
            clientLogLevel: "none",
            quiet: true,
        },
        module: {
            loaders: [
                {
                    test: /\.html$/,
                    loader: "html-loader",
                }, {
                    test: /\.vue$/,
                    loader: "vue-loader",
                    options: {
                        cssModules: {
                            localIdentName: "[path][name]---[local]---[hash:base64:5]",
                            camelCase: true,
                        },
                        extractCSS: true,
                        loaders: env.production ? {
                            css: ExtractTextPlugin.extract({ use: "css-loader!px2rem-loader?remUnit=40&remPrecision=8", fallback: "vue-style-loader" }),
                            scss: ExtractTextPlugin.extract({ use: "css-loader!px2rem-loader?remUnit=40&remPrecision=8!sass-loader", fallback: "vue-style-loader" }),
                        } : {
                            css: "vue-style-loader!css-loader!px2rem-loader?remUnit=40&remPrecision=8",
                            scss: "vue-style-loader!css-loader!px2rem-loader?remUnit=40&remPrecision=8!sass-loader",
                        },
                    },
                }, {
                    test: /\.scss$/,
                    loader: "style-loader!css-loader!sass-loader",
                },
            ],
        },
        resolve: {
            extensions: [
                ".js", ".vue", ".json",
            ],
            alias: {
                vue$: "vue/dist/vue.esm.js",
            },
        },
        plugins,
        output: {
            filename: "[name].min.js",
            path: path.resolve(__dirname, "dist"),
        },
    }
}
